<template>
  <div class="table">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      show-header
      highlight-current-row
      table-layout="auto"
      :span-method="operationObj.row ? objectSpanMethod : objectSpanMethod1"
    >
      <el-table-column
        :prop="item"
        :label="key"
        v-for="(key, item, index) in tableArr"
       
        :key="item"
      ></el-table-column>

      <!-- 操作按钮 -->
      <el-table-column
        fixed="right"
        :label="operationObj.title1"
        width="80"
        v-if="operationObj.bool1"
      >
        <template #default="scope">
          <el-button
            :type="operationObj.type1"
            @click="$emit('deleteRow1', scope.$index)"
            :text="operationObj.text1"
            v-show="tableData[scope.$index].btn1 !== false"
            size="small"
          >
            {{
            tableData[scope.$index].type1
            ? tableData[scope.$index].type1
            : operationObj.operation1
            }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        :label="operationObj.title2"
        width="80"
        v-if="operationObj.bool2"
      >
        <template #default="scope">
          <el-button
            :type="operationObj.type2"
            @click="$emit('deleteRow2', scope.$index)"
            :text="operationObj.text2"
            v-show="tableData[scope.$index].btn2 !== false"
            size="small"
          >
            {{
            tableData[scope.$index].type2
            ? tableData[scope.$index].type2
            : operationObj.operation2
            }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useCounterStore } from "../stores/counter";
import { ref } from "vue";
import dayjs from "dayjs";
// const stores = useCounterStore()
defineEmits(["deleteRow1", "deleteRow2"]);

const props = defineProps({
  tableData: {
    default: [
      {
        A: "H202212091111",
        B: "2022-12-9 12:24:24",
        C: "01:22:11",
        D: "老韩",
        E: "15300000000",
        F: "中国矿业大学南湖校区松苑1号楼",
        G: "待接单",
        btn1: true, //单个btn是否显示
        type1: "w" // btn内容需要单独写
      }
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   btn1: false,
      //   type1: "d",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   btn1: false,
      //   type1: "d",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "d",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "d",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "s",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "z",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "e",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "b",
      // },
      // {
      //   订单编号: "H202212091111",
      //   订单时间: "2022-12-9 12:24:24",
      //   接单剩余时间: "01:22:11",
      //   联系人: "老韩",
      //   联系电话: "15300000000",
      //   回收地点: "中国矿业大学南湖校区松苑1号楼",
      //   状态: "待接单",
      //   type1: "w",
      // },
    ]
  },
  tableArr: {
    // default: [
    //   "订单编号",
    //   "订单时间",
    //   "接单剩余时间",
    //   "联系人",
    //   "联系电话",
    //   "回收地点",
    //   "状态",
    // ],
    default: {
      A: "订单编号",
      B: "订单时间",
      C: "接单剩余时间",
      D: "联系人",
      E: "联系电话F",
      F: "回收地点",
      G: "状态"
    }
  },
  operationObj: {
    default: {
      operation1: "查看详情",
      operation2: "接单",
      title1: "操作1", //操作标题
      title2: "操作2",
      type1: "primary", //button 类型
      type2: "primary",
      text1: false, // true 为文字类型
      text2: false,
      bool1: true, //操作是否显示
      bool2: true,
      row: false //是否合并
    }
  },
  size: {
    type: String,
    default: "small"
  }
});

// const loading = ref(true)

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }

  if (columnIndex === 1) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};

const objectSpanMethod1 = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 1,
        colspan: 1
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1
      };
    }
  }
};

// 需要传递一个表头内容的数组tableArr， 内容数组operationObj ， 操作的数据 如
//    {
//         operation1: '查看详情',  操作内容1
//         operation2: '接单',      操作内容2
//         title1: '操作1',         操作标题1
//         title2: '操作2',         操作标题2
//         type1: 'primary',        button 样式1
//         type2: 'primary',        button 样式1
//     }

//   deleteRow1为操作1里面按钮的事件
//   deleteRow2为操作2里面按钮的事件
</script>

<style lang="less" scoped>
.table {
  width: 100%;

  // height: 150px;
}
</style>
